<template>
  <q-card style="width: 1000px; max-width: 100vw;" class="overflow-hidden card-radius" >
    <q-toolbar class="popup-header">
      <q-toolbar-title v-if="props.title" class="q-ma-md cap">
        {{props.mode +' '+  props.title }}
      </q-toolbar-title>
      <q-space />
        <q-btn
        icon="close"
        size="lg"
        flat
        round
        dense
        v-close-popup
        />

    </q-toolbar>
    <q-card-section v-if="props.content">
      {{ props.content }}
    </q-card-section>

      <slot></slot>
      

    <q-card-actions v-if="props.ok || props.cancel || props.submit" class="justify-evenly q-pa-md">
          <q-btn v-if="props.ok" label="OK" class="q-ml-sm yellow-btn" @click="clickBtn3"/>
          <q-btn v-if="props.cancel" label="Cancel" class="q-ml-sm blue-btn" @click="clickBtn2"/>
          <q-btn v-if="props.submit" label="Submit" class="default-btn" type="submit" @click="clickBtn1"/>
      </q-card-actions>
  </q-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(defineProps<{
    ok?:()=>void
    submit?:()=>void
    cancel?:()=>void
    title: string
    content?: string
    mode: string
}>(),{
  content:'',
  mode: ''
})

async function clickBtn1() {
  if (props.submit)
    props?.submit()
}

function clickBtn2() {
  if (props.cancel)
    props?.cancel()
}

function clickBtn3() {
  if (props.ok)
    props?.ok()
}
</script>
<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 100;
  width: 100%;
  text-align: center;
}



.overflow-hidden {
  overflow: hidden;
}

.cap {
  text-transform: capitalize;
}
</style>
